<script lang='ts' setup>
import { reactive, ref } from 'vue' 
import { Plus } from '@element-plus/icons-vue'
import { api as ViewerApi } from 'v-viewer'

import type { FormInstance, FormRules, UploadUserFile, UploadProps } from 'element-plus' 
import type { Tree } from './AddInformation.vue'

const fileList = ref<UploadUserFile[]>([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },]
)
const state = reactive({
    name: '',
    parentCategory: [
        { label: '茶饮系列', value: 1},
        { label: '面部家居', value: 2},
        { label: '眼部家居', value: 3},
    ],
    treeData: [
        {
            id: 2,
            label: 'Level one 2',
            pid: 0,
            children: [
                {
                    id: 5,
                    label: 'Level two 2-1',
                    pid: 2
                },
                {
                    id: 6,
                    label: 'Level two 2-2',
                    pid: 2
                },
            ],
        },
        {
            id: 3,
            label: 'Level one 3',
            pid: 0,
            children: [
                {
                    id: 7,
                    label: 'Level two 3-1',
                    pid: 3
                },
                {
                    id: 8,
                    label: 'Level two 3-2',
                    pid: 3
                },
            ],
        },
    ] as Array<Tree>,
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<any>>({
	type: [{ required: true, message: '请选择上传方式', trigger: 'change' }], 
})

const props = withDefaults(defineProps<{ 
    modelValue: boolean, 
}>(), {
    modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const ruleForm = reactive({ 
	parent: '',
	name: '',
	type: 1, 
})
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}

const moveToHandle = (event: any) => {
    console.log(event);
    
}

// const handleRemove = (event: any) => {
//     console.log(event);
    
// }

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile);
    ViewerApi({
        options: {
            initialViewIndex: 0
        },
        images: fileList.value.map(e => e.url) as Array<string>
    });
}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="上传图片" center @close="closeDialog" style="width: 800px;" :z-index="101">
            <section>
               
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			     status-icon style="min-height: 400px;"> 
                    <el-form-item label="上传方式" prop="type">
                        <!-- <el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入分类名称" /> -->
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="1">本地上传</el-radio>
                            <!-- <el-radio :label="2">网络上传</el-radio>
                            <el-radio :label="3">扫码上传</el-radio> -->
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="上传至分组" >
                        <el-cascader :options="state.treeData" placeholder="移动图片至"
                          :props="{value: 'id', checkStrictly: true,}" clearable
                         @change="moveToHandle"
                        />
                    </el-form-item>
                    <el-form-item label="上传图片" >
                        <el-upload
                            v-model:file-list="fileList"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                        >
                            <el-icon><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label=" " > 
                        <p style="color: #777;">建议上传图片最大宽度750px，不超过3MB；仅支持jpeg、png格式，可拖拽调整上传顺序</p>
                    </el-form-item>
                </el-form>
                <el-row justify="end" class="mt20">
                    <el-button  @click="closeDialog">取消</el-button>
                    <el-button type="primary"  @click="submitForm(ruleFormRef)">确定</el-button>
                </el-row>
            </section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.goods-img-list{
    display: flex;
    flex-wrap: wrap;
    .goods-img-item{
        text-align: center;
        margin-right: 20px;
        margin-bottom: 20px;
        border: 1px solid #fff;
        .goods-img-name{
            font-size: 13px;
            margin-top: 4px;
        }
       
    }
    .goods-img{
        width: 90px;
        height: 90px; 
        object-fit: cover; 
        border-radius: 6px;
        border: 2px solid #ffffff;
        cursor: pointer;
        &:hover {
            border: 2px solid #e75c5c;
        }
    }
    .active-img {
        border: 2px solid #e75c5c;
    }
}
</style>